<template>
  <div class="order_container">
    <header>
        确认订单
    </header>
    <div class="order_context">
        <div class="address">
            <p>订单配送至：</p>
            <div class="detail">
                <h3>广州大石街道
                    
                </h3>
                <i class="fa fa-angle-right"></i>
            </div>
            <div class="userInfo">
                <span>lzj</span>
                <span>18033</span>
            </div>
        </div>
        <div class="busiName">
            <h2>万家饺子（大石店）</h2>
        </div>
        <div class="orderInfo">
            <ul>
                <li>
                    <img src="/img/dcfl06.png">
                    <div>
                        <p>纯肉鲜肉（水饺） x 2</p>
                        <p>￥15</p>
                    </div>
                </li>
                <li>
                    <img src="/img/dcfl06.png">
                    <div>
                        <p>纯肉鲜肉（水饺） x 2</p>
                        <p>￥15</p>
                    </div>
                </li>
            </ul>
            <div class="order_ps">
                <p>配送费</p>
                <span>￥3</span>
            </div>
        </div>
    </div>
    <footer>
        <div class="footer_context">
            <div class="order_left">￥49</div>
            <div class="order_right">去支付</div>
        </div>
    </footer>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>

.order_container{
    width: 100;
    position: relative;
}

.order_container header{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: bisque;
    font-size: 4.8vw;
    height: 12vw;
    color: white;
    font-weight: 700;
}

.order_container .order_context{
    width: 100%;
}

.order_container .order_context .address{
    width: 100%;
    background-color: bisque;
}

.order_container .order_context .address p{
    font-size: 3vw;
    font-weight: 300;
    margin-left: 1vw;
}
.order_container .order_context .address .detail{

    display: flex;
    justify-content: space-between;
    align-items: center;
}
.order_container .order_context .address .detail h3{
    font-size: 4vw;
    font-weight: 700;
    margin: 1vw 1vw;
}
.order_container .order_context .address .detail i{
    font-size: 6vw;
    font-weight: 700;
    margin: 1vw 5vw;
    color: white;
}
.order_container .order_context .address .userInfo{
    padding-bottom: 2vw;
}
.order_container .order_context .address .userInfo span{
    font-size: 3.2vw;
    font-weight: 700;
    margin: 1vw 1vw;
    color: white;
}
.order_container .order_context .busiName{
    width: 100%;
}
.order_container .order_context .busiName h2{
    box-sizing: border-box;
    padding: 2vw;
    font-size: 4vw;
    color: #666;
    border-bottom: solid 1px #DDD;
}

.order_container .order_context .orderInfo{
    width: 100%;
}
.order_container .order_context .orderInfo ul{
    width: 100%;
}
.order_container .order_context .orderInfo ul li{
    display: flex;
    justify-content: left;
    width: 100%;
    margin-top:4vw
}
.order_container .order_context .orderInfo ul li img{
    width: 10vw;
    height: 10vw;
}
.order_container .order_context .orderInfo ul li div{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.order_container .order_context .orderInfo ul li div p{
    font-size: 3.5vw;
    margin-left: 3vw;
}
.order_container .order_context .orderInfo ul li div p:last-of-type{
    font-size: 3.5vw;
    margin-right: 4vw;
}

.order_container .order_context .orderInfo .order_ps{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6vw;
}

.order_container .order_context .orderInfo .order_ps p{
    color: #666;
    font-size: 3.5vw;
    margin-left: 2vw;
}
.order_container .order_context .orderInfo .order_ps span{
    color: #666;
    font-size: 3.5vw;
    margin-right: 4vw;
}
.order_container footer{
    width: 100%;
    height: 14vw;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.order_container footer .footer_context{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.order_container footer .footer_context .order_left{
    flex:6;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #505051;
    height: 14vw;
    color: white;
    font-weight: 700;
}
.order_container footer .footer_context .order_right{
    flex:4;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #38CA73;
    height: 14vw;
    color: white;
    font-weight: 700;
}



</style>